<template>
  <div id="app">
    <div class="description-div">默认</div>
    <simple-step-bar></simple-step-bar>

    <div class="description-div">rem单位</div>
    <div>
      <button @click="less(1)">后退</button>
      <button @click="plus(1)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='80' :totalHeight='3' :unit='"rem"'
      :stepList="stepList1" :currentStep="currentStep1"
      :itemWidth='40' :lienWidth='0.1'
    ></simple-step-bar>

    <div class="description-div">px单位</div>
    <div>
      <button @click="less(2)">后退</button>
      <button @click="plus(2)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='720' :totalHeight='48' :unit='"px"'
       :stepList="stepList2" :currentStep="currentStep2"
       :itemWidth='240' :lienWidth='2'
    ></simple-step-bar>

    <div class="description-div">个性化样式</div>
    <div>
      <button @click="less(3)">后退</button>
      <button @click="plus(3)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='80' :totalHeight='3'
      :unit='"rem"' :stepBackground='"#FFFFFF"'
      :stepList="stepList3" :currentStep="currentStep3"
      :itemWidth='20' :lienWidth='0.1' :lienColor='"red"'
      :processingFontColor='"#ffffff"' :processingFontColorN='"#FF0005"'
      :processingBackground='"#ef5e41"' :stepBorderColor='"#FF0005"'
    ></simple-step-bar>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        stepList1:["步骤a","步骤b"],
        stepList2:["步骤1","步骤2","步骤3"],
        stepList3:["步骤一","步骤二","步骤三","步骤四"],
        currentStep1:1,
        currentStep2:2,
        currentStep3:3,
      }
    },
    methods:{
      plus(type){
        switch (type) {
          case 1:
            this.currentStep1++;
            break;
          case 2:
            this.currentStep2++;
            break;
          case 3:
            this.currentStep3++;
            break;
        }
      },
      less(type){
        switch (type) {
          case 1:
            this.currentStep1--;
            break;
          case 2:
            this.currentStep2--;
            break;
          case 3:
            this.currentStep3--;
            break;
        }
      }
    }
  }
</script>

<style lang="scss">
  #app {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  .description-div{
    margin-top: 2rem;
    height: 2rem;
  }
</style>
